<template>
	<layout safeArea>
		<!-- <view class="top-Img" slot="top">
			<image src="../../static/image/bjtp.jpg" mode="" :lazy-load="true" mode="widthFix"></image>
		</view> -->
		<view slot="medi">
			<home v-show="selectTab=='home'"></home>
			<more v-show="selectTab=='more'"></more>
			<mine v-show="selectTab=='mine'"></mine>
		</view>
		<view slot="bottom">
			<tabBat @tabSwitchover="tabSwitchover"></tabBat>
		</view>
	</layout>
</template>

<script>
	import tabBat from "@/pages/components/tabBar.vue";
	import home from "@/pages/components/home.vue";
	import more from "@/pages/components/more.vue";
	import mine from "@/pages/components/mine.vue";
	export default {
		components: {
			tabBat,
			mine,
			more,
			home
		},
		data() {
			return {
				indexList: [],
				selectTab: 'home',
			}
		},
		mounted() {},
		methods: {
			gridClick(item) {
				console.log(item, '是否点击');
				uni.navigateTo({
					url: item.url
				})
			},
			tabSwitchover(name) {
				this.selectTab = name;
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.top-Img {
		width: 100%;

		image {
			width: 100%;
		}
	}

	.gridItem {
		text-align: center;
		align-items: center;
	}
</style>